import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Form, Input, Button, Checkbox, message, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styled from 'styled-components';

const PageContainer = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f2f5;
`;

const LoginCard = styled(Card)`
  width: 400px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
`;

const Logo = styled.div`
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  
  img {
    height: 32px;
    margin-right: 8px;
  }
`;

const StyledForm = styled(Form)`
  max-width: 350px;
  margin: 0 auto;
`;

const ButtonContainer = styled.div`
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const LoginPage: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  
  // 处理登录表单提交
  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      // 模拟登录成功
      setTimeout(() => {
        // 保存token到localStorage（模拟token）
        localStorage.setItem('token', 'mock-token-' + Date.now());
        // 简单存储用户名便于显示
        localStorage.setItem('username', values.username || '用户');
        
        message.success('登录成功！');
        
        // 跳转到首页或者之前的页面
        navigate('/');
        
        setLoading(false);
      }, 1000);
    } catch (error) {
      console.error('登录失败', error);
      message.error('用户名或密码错误，请重试');
      setLoading(false);
    }
  };

  // 快速登录功能
  const handleQuickLogin = () => {
    setLoading(true);
    setTimeout(() => {
      localStorage.setItem('token', 'mock-token-' + Date.now());
      localStorage.setItem('username', '测试用户');
      message.success('登录成功！');
      navigate('/');
      setLoading(false);
    }, 800);
  };
  
  return (
    <PageContainer>
      <LoginCard>
        <Logo>
          <img src="/logo.png" alt="拍拍旅宿" />
          拍拍旅宿
        </Logo>
        <StyledForm
          name="login"
          initialValues={{ remember: true }}
          onFinish={handleSubmit}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input 
              prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} 
              placeholder="用户名" 
              size="large" 
            />
          </Form.Item>
          
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password 
              prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} 
              placeholder="密码" 
              size="large" 
            />
          </Form.Item>
          
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
            
            <Link to="/forgot-password" style={{ float: 'right' }}>
              忘记密码
            </Link>
          </Form.Item>
          
          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              size="large"
              style={{ width: '100%' }}
            >
              登录
            </Button>
          </Form.Item>

          <Button 
            type="link" 
            onClick={handleQuickLogin} 
            style={{ padding: 0, width: '100%', textAlign: 'center', marginBottom: '16px' }}
          >
            立即体验（免登录）
          </Button>
          
          <ButtonContainer>
            <span>还没有账号？</span>
            <Link to="/register">
              立即注册
            </Link>
          </ButtonContainer>
        </StyledForm>
      </LoginCard>
    </PageContainer>
  );
};

export default LoginPage; 